/**
 * Created by Administrator on 2017/7/21 0021.
 */
define(function(){
    var obj = {};
    obj.add = function(btn,city,boxTop,boxBottom,tex,cityDiv){
        obj.btn = document.querySelector(btn);
        obj.city = document.querySelector(city);
        obj.boxTop = document.querySelector(boxTop);
        obj.cityDiv = document.querySelector(cityDiv);
        if(document.querySelector(boxBottom)){
            obj.boxBottom = document.querySelector(boxBottom);
        }
        obj.tex = document.querySelector(tex);
        obj.ajax();
    };
    obj.ajax = function(){
        var xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:8888/city",true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status>=200 && xhr.status<=300 || xhr.status == 304){
                    obj.createHandler(JSON.parse(xhr.responseText).result)
                }
            }
        }
    };
    obj.createHandler = function(o){
        obj.hotCity = obj.cityDiv.querySelectorAll("div")[0];
        obj.allCity = obj.cityDiv.querySelectorAll("div")[1];
        obj.uls=document.createElement("ul");
        obj.allCity.appendChild(obj.uls);
        obj.hotUl=document.createElement("ul");
        obj.hotCity.appendChild(obj.hotUl);
        for(var zi in o.citylist){
            var lis = document.createElement("li");
            lis.style.width = "17px";
            lis.style.height = "22px";
            lis.style.lineHeight = "22px";
            lis.style.marginRight = 0;
            lis.style.borderBottom = "1px solid #7F7F7F";
            lis.style.borderRadius = "3px 3px 0 0";
            lis.style.textAlign = "center";
            obj.uls.appendChild(lis);
            lis.textContent=zi;
            var ul = document.createElement("ul");
            ul.className="city";
            obj.allCity.appendChild(ul);
            for(var i=0;i< o.citylist[zi].length;i++){
                var li = document.createElement("li");
                li.textContent= o.citylist[zi][i].name;
                ul.appendChild(li);
            }
        }
        for(var j=0;j<o.hotcity.length;j++) {
            var hotLi = document.createElement("li");
            hotLi.textContent = o.hotcity[j].name;
            obj.hotUl.appendChild(hotLi);
        }
        obj.changeCity();
    };
    obj.changeCity = function(){
        var lis = obj.uls.getElementsByTagName("li");
        var city = document.getElementsByClassName("city");
        var btns = obj.boxTop.getElementsByTagName("button")[0];
        var hotLi = obj.hotCity.getElementsByTagName("li");
        if(obj.boxBottom){
            var sp1 = obj.boxBottom.getElementsByTagName("span")[0];
            obj.boxBottom.onclick = function(){
                obj.boxBottom.appendChild(obj.city);
                obj.city.style.left = 0;
                obj.city.style.display = "block";
            }
        }
        for(var a=0;a<hotLi.length;a++){
            (function(b){
                hotLi[b].onclick=function(){
                    tex.textContent=hotLi[b].textContent;
                    obj.city.style.display="none";
                }
            })(a);
        }
        obj.btn.onclick = function(){
            obj.boxTop.appendChild(obj.city);
            obj.city.style.left = "350px";
            obj.city.style.display = "block";
        };
        btns.onclick = function(){
            obj.city.style.display = "none";
        };
        lis[0].style.borderTop="2px solid #C7C7C7";
        lis[0].style.borderLeft="2px solid #C7C7C7";
        lis[0].style.borderRight="2px solid #C7C7C7";
        lis[0].style.borderBottom="none";
        lis[0].style.color="red";
        city[0].style.display="block";
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute("num",i);
            city[i].setAttribute("num",i);
            (function (s){
                lis[s].onclick=function(){
                    for(var j=0;j<lis.length;j++){
                        lis[j].style.border="none";
                        lis[j].style.borderBottom="1px solid #C7C7C7";
                        lis[j].style.color="";
                        city[j].style.display="none";
                    }
                    lis[s].style.borderTop="2px solid #C7C7C7";
                    lis[s].style.borderLeft="2px solid #C7C7C7";
                    lis[s].style.borderRight="2px solid #C7C7C7";
                    lis[s].style.borderBottom="none";
                    lis[s].style.color="red";
                    city[s].style.display="block";
                    obj.writeCity(s);
                }
            })(i);
        }
        obj.writeCity = function(k){
            for(var m=0;m<city.length;m++){
                if(city[m].getAttribute("num")==k){
                    var lii=city[m].getElementsByTagName("li");
                    for(var n=0;n<lii.length;n++){
                        (function (l){
                            lii[l].onclick=function(e){
                                e.stopPropagation();
                                if(sp1){
                                    sp1.textContent = lii[l].textContent;
                                }
                                obj.tex.textContent = lii[l].textContent;
                                obj.city.style.display = "none";
                            }
                        })(n);
                    }
                }
            }
        }
    };
    return obj;
});